<template>
	<div id="modifyLineInfo">
		<ul>
			<li><label for="linecode">线路编码:</label> <input type="text" id="linecode" v-model="psLineInfo.linecode"
					class="styledInput"></li>
			<li><label for="linename">线路名称:</label> <input type="text" id="linename" v-model="psLineInfo.linename"
					class="styledInput"></li>
			<li><label for="linelength">线路长度:</label> <input type="text" id="linelength" v-model="psLineInfo.linelength"
					class="styledInput"></li>
			<li><label for="backlength">回路长度:</label> <input type="text" id="backlength" v-model="psLineInfo.backlength"
					class="styledInput"></li>
			<li><label for="productdate">投运日期:</label> <input type="date" id="productdate"
					v-model="psLineInfo.productdate" class="styledInput"></li>
			<li><label for="voltagelevel">电压等级:</label> <input type="text" id="voltagelevel"
					v-model="psLineInfo.voltagelevel" class="styledInput"></li>
			<li>起始杆号: <select id="startselect" class="styledSelect" v-model="psLineInfo.startpole">
					<option value="-1">--请选择--</option>
					<option v-for="p in startPoleList" :value="p.id">{{p.polecode}}</option>
				</select></li>
			<li>终止杆号: <select id="endselect" class="styledSelect" v-model="psLineInfo.endpole">
					<option value="-1">--请选择--</option>
					<option v-for="p in endPoleList" :value="p.id">{{p.polecode}}</option>
				</select></li>
			<li>塔基数: <input type="text" v-model="psLineInfo.towerbasenum" class="styledInput"></li>
			<li>备注: <textarea v-model="psLineInfo.common" name="" id="" class="styledTextarea" cols="30"
					rows="5"></textarea></li>
			<li>
				是否启用: <input type="radio" name="isstart" v-model="psLineInfo.isstart" value="1" class="styledRadio">启用
				<input type="radio" name="isstart" v-model="psLineInfo.isstart" value="0" class="styledRadio">停用
			</li>
			<li>
				<el-button type="primary" @click="handlerModifyLineInfo">保存</el-button>
				<el-button type="info" @click="$router.push('/psLineInfo')">返回</el-button>
			</li>
		</ul>
	</div>
</template>
<script>
	import {
		queryStartPloeAndEndPole,
		querySingleLineInfoById,
		modifyLineInfo,
		getPoleCodePrefix
	} from '../../config/request.js'
	export default {
		data() {
			return {
				psLineInfo: {
					id: '',
					startpole:-1,
					endpole:-1,
					startpolecode:'',
					endpolecode:''
				},
				lines: [],
				startPoleList:[],
				endPoleList:[],
			}
		},
		methods: {
			formatedDate(dateTime) {
				const date = new Date(dateTime);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, 0);
				const day = date.getDate().toString().padStart(2, 0);
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			formatDateTime(dateTime) {
				const date = new Date(dateTime);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},
			handlerModifyLineInfo() {
				this.psLineInfo.productdate = this.formatedDate(this.psLineInfo.productdate);
				// 获取起始杆号下拉框的选中文本值
				const startPoleSelect = document.querySelector('#startselect'); // 通过类名选择元素，如果有多个相同的类名，可能需要使用更具体的选择器
				const selectedStartPoleText = startPoleSelect.options[startPoleSelect.selectedIndex].text;
				const endPoleSelect = document.querySelector('#endselect'); // 通过类名选择元素，如果有多个相同的类名，可能需要使用更具体的选择器
				const selectedEndPoleText = endPoleSelect.options[endPoleSelect.selectedIndex].text;
				this.psLineInfo.startpolecode = selectedStartPoleText;
				this.psLineInfo.endpolecode  = selectedEndPoleText;
				modifyLineInfo(this.psLineInfo).then(res => {
					if (res.code === 200) {
						this.$message.success('保存成功');
					}
				}).catch(err => {
					this.$notify.error({
						title: '请求出错',
						message: err,
						duration: 1500
					})
				})
			}
		},
		created() {
			const id = this.$route.query.id;
			querySingleLineInfoById(id).then(res => {
				this.psLineInfo = res.data.obj;
				this.psLineInfo.productdate = this.formatDateTime(this.psLineInfo.productdate);
				getPoleCodePrefix(this.psLineInfo).then(res => {
					//绑定到杆塔下拉框
					if(res.code === 200){
						this.lines = res.data.psPoleInfoList;
						let midIndex = Math.ceil(this.lines.length / 2);
						let startTower = this.lines.slice(0,midIndex);
						let endTower = this.lines.slice(midIndex);
						this.startPoleList = startTower;
						this.endPoleList = endTower;
						console.log(this.startPoleList)
					}
				}).catch(err => {
					this.$notify.error({
						title: '请求出错',
						message: err,
						duration: 1500
					})
				})
			}).catch(err => {
				this.$notify.error({
					title: '请求出错',
					message: err,
					duration: 1500
				})
			});
		},
	}
</script>
<style>
	#modifyLineInfo {
		margin: 20px;
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 5px;
		display: flex;
		justify-content: center;
	}

	.styledInput,
	.styledSelect,
	.styledTextarea {
		width: 200px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-bottom: 10px;
	}

	.styledButton {
		padding: 8px 16px;
		border: none;
		border-radius: 3px;
		cursor: pointer;
		margin-right: 10px;
	}

	.styledRadio {
		margin-right: 10px;
	}

	.styledTextarea {
		resize: vertical;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	li {
		margin-bottom: 10px;
	}
</style>